<template>
  <q-page padding class="bg-grey-2">
    <div class="q-gutter-y-md">
      <q-card flat>
        <q-card-section v-if="detail">
          <div class="row q-col-gutter-y-md">
            <div class="col-sm">
              <div class="text-h6">{{ detail.baseView.demandTitle }}</div>
              <div>需求号：{{ detail.demandId }}</div>
              <div class="q-gutter-x-md">
                <q-badge
                  color="orange"
                  outline
                  :label="detail.baseView.baseCategoryName"
                />
                <q-badge
                  color="blue"
                  outline
                  :label="item.labelName"
                  v-for="(item, index) in detail.baseView.labels"
                  :key="index"
                />
              </div>
            </div>
            <div class="col-auto q-gutter-y-md">
              <div class="text-warning">
                偏好联系时间：
                <span
                  v-for="(item, index) in detail.baseView.demandDetailedContent
                    .contactTimeCustoms"
                  :key="index"
                  class="str-separator"
                >
                  {{ item }}
                </span>
              </div>
              <div class="q-gutter-x-md">
                <q-btn
                  :color="data.contact.online ? 'info' : 'grey'"
                  icon="iconfont icon-message_fill_light"
                  label="在线联系"
                  unelevated
                  @click="contactOnline"
                  :disable="!data.contact.online"
                >
                </q-btn>
                <q-btn
                  :color="data.contact.phone ? 'blue' : 'grey'"
                  icon="iconfont icon-phone"
                  label="电话联系"
                  unelevated
                  @click="contactPhone"
                  :disable="!data.contact.phone"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-else style="height: 106px">
          <div>需求号：{{ data.demandId }}</div>
        </q-card-section>
      </q-card>

      <q-card flat>
        <q-card-section>
          <div class="text-h6">基本信息</div>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-md">
            <div class="col-sm-4 col-xs-6">
              <div class="tag-label text-grey text-caption">需求类型</div>
              <div v-if="detail">{{ detail.baseView.baseCategoryName }}</div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-4 col-xs-6">
              <div class="tag-label text-grey text-caption">解决方式</div>
              <div v-if="detail">{{ detail.baseView.baseCategoryName }}</div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-4 col-xs-6">
              <div class="tag-label text-grey text-caption">需求预算</div>
              <div class="text-blue" v-if="detail">
                {{ data.price }}
              </div>
              <div v-else>--</div>
            </div>
            <div class="col-12">
              <div class="tag-label text-grey text-caption">需求标题</div>
              <div v-if="detail">{{ detail.baseView.demandTitle }}</div>
              <div v-else>--</div>
            </div>
            <div class="col-12">
              <div class="tag-label text-grey text-caption">需求描述</div>
              <div v-if="detail">{{ detail.baseView.content }}</div>
              <div v-else>--</div>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <q-card flat>
        <q-card-section>
          <div class="text-h6">详细要求</div>
        </q-card-section>
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-md">
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">
                允许参与服务商数量
              </div>
              <div v-if="detail">
                {{
                  detail.baseView.demandDetailedContent.allowedBidNum || "不限"
                }}
              </div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">服务商所在地</div>
              <div v-if="detail">
                {{ detail.baseView.demandDetailedContent.region.cityName }}
              </div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">服务商类型</div>
              <div v-if="detail">
                {{ data.sellerScale }}
              </div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">工作反馈要求</div>
              <div v-if="detail">--</div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">期望完成日期</div>
              <div v-if="detail">
                {{
                  formatDate(
                    detail.baseView.demandDetailedContent.deliverDate,
                    "YYYY-MM-DD"
                  )
                }}
              </div>
              <div v-else>--</div>
            </div>
            <div class="col-sm-3 col-xs-6">
              <div class="tag-label text-grey text-caption">开票类型要求</div>
              <div v-if="detail">--</div>
              <div v-else>--</div>
            </div>
            <template v-if="data.categoryConfigDto">
              <template
                v-for="(item, index) in data.categoryConfigDto.tagItems"
                :key="index"
              >
                <div class="col-sm-3 col-xs-6" v-if="item.tagContents.length">
                  <div class="tag-label text-grey text-caption">
                    {{ item.tagName }}
                  </div>
                  <div>
                    <span
                      class="str-separator"
                      v-for="(tag, ti) in item.tagContents"
                      :key="ti"
                    >
                      {{ tag.contentName }}
                    </span>
                  </div>
                </div>
              </template>
            </template>
          </div>
        </q-card-section>
        <q-card-section class="row q-col-gutter-md" v-if="detail">
          <template v-for="(file, fi) in detail.baseView.fileList" :key="fi">
            <div class="col-6">
              <q-item class="file-item">
                <q-item-section avatar>
                  <div
                    :class="extFormat(file.fileExt)"
                    class="full-height full-width file-ext"
                  ></div>
                </q-item-section>
                <q-item-section>
                  <q-item-label lines="1">{{ file.fileName }}</q-item-label>
                  <q-item-label caption>
                    {{ format.humanStorageSize(file.fileSize) }}
                  </q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-btn
                    color="primary"
                    @click="download(file)"
                    flat
                    label="下载查看"
                  />
                </q-item-section>
              </q-item>
            </div>
          </template>
        </q-card-section>
      </q-card>

      <q-card flat>
        <q-card-section>
          <div class="text-h6">需求动态</div>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <q-timeline v-if="detail">
            <template
              v-for="(item, index) in detail.historyFlowView"
              :key="index"
            >
              <q-timeline-entry
                :title="formatDate(item.time, 'HH:mm')"
                :subtitle="formatDate(item.time, 'YYYY-MM-DD')"
                side="left"
              >
                <div>
                  {{ item.value }}
                </div>
              </q-timeline-entry>
            </template>
          </q-timeline>
          <div v-else>暂无动态</div>
        </q-card-section>
      </q-card>
    </div>
    <div class="fixed-full" v-if="data.loading.refresh">
      <common-inner-loading></common-inner-loading>
    </div>
  </q-page>
</template>

<style lang="scss" scoped>
.label {
  color: #ccc;
}
.content-box {
  border: 1px solid #ccc;
  position: relative;
  padding: 16px;
  margin-top: 8px;
  .content-box-title {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background: white;
    padding: 0 12px;
    height: 16px;
    line-height: 16px;
  }
}
.file-item {
  border: 1px dashed #ccc;
  border-style: dashed;
}
.file-ext {
  background-size: 100%;
}
</style>

<script>
import { date, format, openURL, useQuasar } from "quasar";
import { fetchDemandDetailInfo } from "src/assets/fetch";
import CommonInnerLoading from "src/components/CommonInnerLoading.vue";
import ContactPhoneDialogVue from "src/components/dialogs/ContactPhoneDialog.vue";
import { computed, defineComponent, reactive, watch, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
// allowedContact
// 0 不限
// 1 在线联系
// 2 隐私电话
// contactTimeCustoms
// 0 不限
export default defineComponent({
  components: { CommonInnerLoading },
  name: "PagesDetailPageVue",
  setup() {
    const $q = useQuasar();
    const $route = useRoute();
    const $store = useStore();

    const detail = ref(null);
    const data = reactive({
      userid: computed(() => $route.query.userid),
      demandId: computed(() => $route.params.id),
      account: computed(() =>
        $store.getters["persisted/accounts"].find(
          (v) => v.userid == $route.query.userid
        )
      ),
      loading: {
        refresh: false,
      },
      contact: computed(() => {
        if (!detail.value) {
          return {};
        }
        const { allowedContact } = detail.value.baseView.demandDetailedContent;
        return {
          phone:
            allowedContact.indexOf(0) >= 0 || allowedContact.indexOf(2) >= 0,
          online:
            allowedContact.indexOf(0) >= 0 || allowedContact.indexOf(1) >= 0,
        };
      }),
      categoryConfigDto: computed(() => {
        if (!detail.value) {
          return {};
        }
        return JSON.parse(
          detail.value.baseView.demandDetailedContent.categoryConfigDto
        );
      }),
      price: computed(() => {
        if (!detail.value) {
          return "";
        }
        const { price, priceMin, priceMax } = detail.value.baseView;
        let r =
          [priceMin, priceMax].filter((v) => v > 0).join(" - ") ||
          (price > 0 ? price : "");
        return r ? r + "元" : "需人才报价";
      }),
      sellerScale: computed(() => {
        if (!detail.value) {
          return "";
        }
        const type = detail.value.baseView.demandDetailedContent.sellerScale;
        const sellers = ["不限", "", "企业"];
        return sellers[type] || "未知-" + type;
      }),
    });

    watch(
      () => [$route.params.id, $route.query.userid],
      ([id, uid]) => {
        if (!id || !uid) {
          return;
        }
        refresh();
      },
      { immediate: true }
    );

    function refresh() {
      data.loading.refresh = true;
      fetchDemandDetailInfo({ demandId: data.demandId }, data.account.cookie)
        .then((res) => {
          detail.value = res.data;
        })
        .finally(() => (data.loading.refresh = false));
    }

    return {
      data,
      detail,
      formatDate: date.formatDate,
      format,
      extFormat(ext) {
        const t = 0 === ext.indexOf(".") ? ext.substring(1) : ext;
        return "icon-file-".concat(t);
      },
      download(file) {
        const url = "https://rms.zbj.com/resource/redirect?key=" + file.fileUrl;
        openURL(url);
      },
      contactPhone() {
        $q.dialog({
          component: ContactPhoneDialogVue,
          componentProps: {
            customerId: data.detail.baseView.employerId,
          },
        });
      },
      contactOnline() {},
    };
  },
});
</script>
